<template>
  <div class="donationContainer">
    <!-- 导航条 -->
    <div class="navList">
      <ul>
        <li class="navItem dot">.</li>
        <li class="navItem first" @click="toHome">首页</li>
        <li class="navItem">.</li>
        <li class="navItem" @click="toAllCategory">全部</li>
        <li class="navItem">.</li>
        <li class="navItem">捐赠名单</li>
        <li class="navItem">.</li>
        <li class="navItem">XMall小程序</li>
        <li class="navItem">.</li>
        <li class="navItem">XPay支付系统</li>
        <li class="navItem">.</li>
        <li class="navItem">XBoot开发平台</li>
        <li class="navItem">.</li>
        <li class="navItem">宣传视频</li>
        <li class="navItem">.</li>
        <li class="navItem">Github</li>
        <li class="navItem">.</li>
        <li class="navItem">商用授权</li>
      </ul>
    </div>
    <!-- 捐赠信息 -->
    <div class="donationInfo">
      <!-- 捐赠标题 -->
      <div class="recommendHeader">
        <h4 class="title">官方精选</h4>
      </div>

      <div class="donationTable clearfix">
        <!-- 表格信息 -->
        <h4 class="tableTitle">
          佛祖保佑这些好心人写程序永无BUG，工资翻倍，长命百岁，迎娶白富美，走上人生巅峰!
        </h4>
        <!-- 表格 -->
        <el-table  :data="donationList" border style="width: 100%">
          <el-table-column
            prop="nickName"
            label="昵称"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="payType"
            label="捐赠方式"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="money"
            label="捐赠金额"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="info"
            label="捐赠人信息"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="捐赠时间"
            sortable
            align="center"
          >
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination
            :current-page="1"
            :page-sizes="[5,10, 20, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="1169">
        </el-pagination>
        </div>
      </div>
    </div>
    <div class="donationInfo">
      <!-- 捐赠标题 -->
      <div class="recommendHeader">
        <h4 class="title">为什么要捐赠</h4>
      </div>
      <div class="content">
        <div class="content-text">
          <p>捐赠是国外用来支持开发者和资源贡献者的一种常见的方式。</p>
          <p>这些开发者不通过加入广告或者进行第三方推广获得收入，</p>
          <p>仅通过使用的用户自己主动捐赠来表达对开发者的感谢！</p>
          <p>当一个非盈利项目仅仅依靠兴趣的支撑，很难确定它还能走多远。</p>
          <p>所有的捐赠都将用于提升我的环境配置，维持网站的运行和提高我的积极性。</p>
          <p>这个渠道的存在并不意味着你必须捐赠。</p>
          <p>你也可以不做任何事。你的捐赠意味着你对我过去所做的表示感谢，而不是表达对未来的期望。</p>
          <p>但你的捐赠会提高我的积极性和设备配置让我努力把手头上的事做的更好。</p>
          <p>我会维护一份名单以感谢所有的捐赠者。正如我所说，捐赠是一个向我表示感谢的方式。</p>
        </div>
      </div>
    </div>
    <div class="donationInfo clearfix">
      <!-- 捐赠标题 -->
      <div class="recommendHeader">
        <h4 class="title">{{thankList.name}}</h4>
      </div>
      <div class="paymentTest">
          <div class="paymentTest-hot" v-for="(panel,index) in thankList.panelContents" :key="panel.id">
            <a href="#" class="clearfix">
              <img :src="panel.picUrl" alt="">
              <h6>{{panel.productName}}</h6>
              <h3>{{panel.subTitle}}</h3>
              <div class="buttonGroup">
                <button class="details">查看详情</button>
                <button class="shoppingCart">加入购物车</button>
              </div>
            </a>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "Donation",
  data(){
      return {
          
      }
  },
  computed:{
    ...mapState({
      donationList:state=>state.donation.donationList,
      thankList:state=>state.donation.thankList[0] || {}
    })
  },
  mounted(){
    this.getDonationInitList()
  },
  methods:{
    //去首页
    toHome(){
      this.$router.push('/home')
    },
    // 去全部商品页
    toAllCategory(){
      this.$router.push('/allcategory')
    },
    // 获取捐赠名单数据
    getDonationInitList(){
      this.$store.dispatch('getDonationList')
      this.$store.dispatch('getThankList')
    }
  }
};
</script>

<style lang="less" scoped>

.donationContainer {
  width: 1250px;
//   height: 950px;
    
  /* background-color: #bcbcbc; */
  margin: 0 auto;
  margin-top: 20px;
  // 导航条
  .navList {
    width: 1250px;
    margin: 0 auto;
    ul {
      display: flex;
      padding: 0px 30px;
      height: 90px;
      line-height: 90px;
      font-size: 14px;
      align-items: center;
      li {
        display: block;
        padding: 0 10px;
        color: #666;
      }
      .navItem .dot {
        text-align: center;
        display: block;
        width: 2px;
        height: 2px;
        background-color: #666;
      }
      .navItem .first {
        padding-left: 10px;
      }
    }
  }
  .donationInfo{
      border: 1px solid #d4d4d4;
      border-radius: 5px;
      margin-bottom: 30px;
      .donationTable{
        .tableTitle{
          width: 100%;
          text-align: center;
          font-size: 18px;
          color: #666;
          margin: 25px 0;
        }
        .pagination{
          padding: 0;
          margin: 20px 0;
        }
      }
      .content{
        .content-text{
          margin: 13px 38px 25px;
          p{
            margin-top: 13px;
            font-size: 16px;
            color: #666;
          }
        }
      }
      .paymentTest{
        height: 430px;
        .paymentTest-hot{
          width: 624px;
          height: 100%;
          // background-color: pink;
          float: left;
          cursor: pointer;
          transition: all .5s;
          background-color: #fff;
          &:hover{
            transform: translateY(-3px);
            box-shadow: 1px 1px 20px #999;
          }
          a{
            display: block;
            height: 100%;
            width: 100%;
            img{
              height: 206px;
              display: block;
              margin: 50px auto 10px;
            }
            h6{
              line-height: 1.2;
              font-size: 16px;
              color: #424242;
              margin: 0 auto;
              padding: 0 14px;
              text-align: center;
              overflow: hidden;
              font-weight: 400;
            }
            h3{
              text-align: center;
              line-height: 1.2;
              font-size: 12px;
              color: #d0d0d0;
              padding: 10px;
            }
            .buttonGroup{
              margin: 15px 0;
              height: 30px;
              text-align: center;
              line-height: 30px;
              color: #d44d44;
              font-family: Arial;
              font-size: 18px;
              font-weight: 700;
              .details{
                width: 100px;
                height: 30px;
                border: 1px solid #e1e1e1;
                border-radius: 4px;
                font-size: 12px;
                color: #646464;
                background-color: #f9f9f9;
                background-image: linear-gradient(
                  80deg,#fff,#f9f9f9);
              }
              .shoppingCart{
                    border: 1px solid #5c81e3;
                    border-radius: 4px;
                    font-size: 12px;
                    color: #fff;
                    background-color: #678ee7;
                    background-image: linear-gradient(
                      180deg,#678ee7,#5078df);
                    width: 100px;
                    height: 30px;
                    margin-left: 8px;
              }
            }
          }
        }
        
        
      }
  }
}
.donationContainer .recommendHeader .title {
  width: 1230px;
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  font-size: 18px;
  border-bottom: 1px solid #d4d4d4;
  border-radius: 8px 8px 0 0;
  color: #626262;
  background-color: #f3f3f3;
}
</style>
